<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
      #info {
        position: absolute;
        top: 100px;
        width: 100%;
        text-align: center;
        z-index: 100;
        display:block;
        font-size: 40px;
        color: blanchedalmond;
      }
			.container{
				width: 300px;
				outline: 1px solid red;
			}
			.image-container{
				width: 100%;
				max-width: 100%;
				height: 0;
				padding-bottom: 56.25%; /* 16:9比例*/
				position: relative;
				overflow: hidden;
			}
			.image-container .square{
				padding-bottom: 100%; /*1：1比例*/
			}
			.image-container img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: contain; /*图片自适应并保持宽高比*/
			}
			.tips{
				position: absolute;
				top: 0;
				left: 0;
				font-size: 14px;
				display: none;	
			}
		</style>
	</head>
	<body>
		<!-- <script type="module" src="/main.js"></script> -->
		<!-- <script type="module" src="/textRender.js"></script> -->
		<!-- <script type="module" src="/drawLineRender.js"></script> -->
		<!-- <script type="module" src="/cameraControll.js"></script> -->
		<!-- <script type="module" src="/3dRender.js"></script> -->
		<!-- <script type="module" src="/3dRender-chair.js"></script> -->
		<!-- <script type="module" src="/3dRender-people.js"></script> -->
		<!-- <script type="module" src="/3dRender-people-walk.js"></script> -->
		<!-- <script type="module" src="/cameraRotateY.js"></script> -->
		<!-- <script type="module" src="/webglRenderer.js"></script> -->
		<!-- <script type="module" src="/orbitControls1.js"></script> -->
		<!-- <script type="module" src="/orbitControls2.js"></script> -->
		<!-- <script type="module" src="/drawGeometry3points.js"></script> -->
		<!-- <script type="module" src="/bufferGeometry.js"></script> -->
		<!-- <script type="module" src="/bufferGeometry2.js"></script> -->
		<!-- <script type="module" src="/texture.js"></script> -->
		<!-- <script type="module" src="/texture2.js"></script> -->
		<!-- <script type="module" src="/textureLoader.js"></script> -->
		<!-- <script type="module" src="/basicMaterial.js"></script> -->
		<!-- <script type="module" src="/standardMaterial.js"></script> -->
		<!-- <script type="module" src="/light.js"></script> -->
		<!-- <script type="module" src="/pointLight.js"></script> -->
		<!-- <script type="module" src="/directionalLightShadow.js"></script> -->
		<!-- <script type="module" src="/pointLightShadow.js"></script> -->
		<!-- <script type="module" src="/spotLightShadow.js"></script> -->
		<!-- <script type="module" src="/raycasterMouseListen.js"></script> -->
		<!-- <script type="module" src="/physicalMoving.js"></script> -->
		<!-- <script type="module" src="/physicalSphereRay.js"></script> -->
		<!-- <script type="module" src="/view-house-box.js"></script> -->
		<script type="module" src="/view-house-sphere.js"></script>
    <!-- <div id="info">Description</div> -->
		<!-- <canvas id="canvas" width="500" height="500"></canvas> -->
		<div class="tips">进入</div>
		<!-- <div class="container">
			<div class="image-container">
				<img src="/image/pandas.jpg" alt="">
			</div>
	
			<div class="image-container square">
				<img src="/image/square.jpg" alt="">
			</div>
		</div> -->
	</body>
</html>